<template>
    <div class="menu-item">
        <!-- <router-link to="/gamelist"></router-link> -->
        <div @click="menuItemClick">{{menu.menuText}}</div>
        <div class="menu-item-expanded" v-bind:style="unfold">
            <div v-for="(links,index) in data.link" :key="index">
                <router-link :to="links.linkTo">
                    {{links.linkName}}
                </router-link>

            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Menuitem',
    props: ['menu'],
    data() {
        return {
            data: {},
            status_unfold: false,
        }
    },
    created() {
        this.data = this.menu;
    },
    computed: {
        unfold() {
            if (this.status_unfold) {
                return { height: (this.data.link.length * 40) + 'px' }
            } else {
                return { height: '0' }
            }

        },
    },
    methods: {
        menuItemClick(index) {
            this.status_unfold = !this.status_unfold;
        }
    }
}
</script>

<style lang="scss" scoped>
.menu-item {
  min-height: 40px;
  line-height: 40px;
  text-indent: 1rem;
  border-bottom: 1px solid #ddd;
  color: #333;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s;
  .menu-item-expanded {
    height: 0;
    overflow: hidden;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    padding-left: 1rem;
    div {
      &:hover {
        background: #ddd;
      }
    }
  }
}
</style>

